<template>
  <div class="goods">
      <Breadcrumb
      :params1="'商品管理'"
      :params2="'商品列表'"
    ></Breadcrumb>
     <el-card class="box-card">
     <el-row :gutter="20">
        <el-col :span="8"
          ><div class="grid-content bg-purple">
            <el-input
              clearable
              placeholder="请输入内容"
              v-model="params.query"
              class="input-with-select"
            >
              <el-button slot="append" icon="el-icon-search" @click='getGoodslist'></el-button>
            </el-input></div
        ></el-col>
        <el-col :span="12"
          ><div class="grid-content bg-purple">
            <el-button type="primary" @click="addgoods">添加商品</el-button>
          </div>
        </el-col>
      </el-row>
     <el-table :data="goodslist" border style="width: 100%">
       <el-table-column type="index" :index="indexMethod" label="#">
        </el-table-column>

      <el-table-column prop="goods_name" label="商品名称" width="600"> </el-table-column>
      <el-table-column prop="goods_price" label="商品价格"> </el-table-column>
      <el-table-column prop="goods_weight" label="商品重量"> </el-table-column>
      <el-table-column prop="" label="创建时间"> 
         <template slot-scope="scope">
            {{scope.row.upd_time | timeFormat}}
         </template>
      </el-table-column>
      <el-table-column prop="" label="操作">
        <template>
          
             <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
             
            ></el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
           
            ></el-button>
         
        </template>
     </el-table-column>

     </el-table>  
       <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pagenum"
        :page-sizes="[10, 20, 40, 60]"
        :page-size="params.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
     </el-card>
  </div>
</template>

<script>
 import  {goodslist_api}  from '@/api/index'

export default {

 

  data() {
    return {
      
       goodslist : [],
       params : {
         query : '',
         pagenum : 1,
         pagesize : 10
       },
       total : 0
    }
  },
  methods:{
    indexMethod(index) {
      return index * 1
    },
     handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.params.pagesize = val
      this.getGoodslist()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.params.pagenum = val
      this.getGoodslist()
    },

   async getGoodslist(){
      var {data : res} = await goodslist_api(this.params)
      
      console.log(res);
      
      this.goodslist = res.data.goods
       this.total = res.data.total
    },
    addgoods(){
      this.$router.push('/addgoods')
    }
  },
  created (){
    this.getGoodslist()
  }
}
</script>

<style  scope lang="less">
  
.box-card{
  width: 95%;
  margin: 0 auto;

  .el-table{
    margin: 20px 0;
  }
}

</style>


